<template>
	<view>
		<view class="upload-content">
			<view class="upload-content" v-if="value">
				<image class="upload-content" mode="aspectFill" :src="value"></image>
				<view class="close-icon" v-if="!disabled">
					<u-icon name="close" color="#FFFFFF" size="36rpx" @click="delAct"></u-icon>
				</view>
			</view>
			<view class="upload-content flex flex-direction align-center justify-center" @click="uploadAct" v-else>
				<u-icon name="camera-fill" color="rgba(102,102,104,0.5)" size="96rpx"></u-icon>
				<view class="upload-tip" v-if="uploadTip">{{uploadTip}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadImg,
	} from '@/api/common.js';
	export default {
		components: {

		},
		props: {
			value: {
				type: String,
				default: '',
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			uploadTip: {
				type: String,
				default: '',
			}
		},
		data() {
			return {

			}
		},
		created() {

		},
		methods: {
			uploadAct() { //上传图片
				if (this.disabled) {
					return false;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						this.upload(tempFilePaths)
					}
				});
			},
			upload(imgUrl) {
				uploadImg(imgUrl).then(res => {
					this.$emit('input', res);
					uni.hideLoading();
				}).catch(res => {
					uni.hideLoading();
				})
			},
			delAct() {
				this.$emit('input', '');
			}
		}
	}
</script>

<style lang="scss">
	.upload-content {
		width: 204rpx;
		height: 204rpx;
		border-radius: 2rpx;
		background-color: #F7F7F7;
		position: relative;

		.upload-tip {
			font-size: 28rpx;
			color: #666668;
		}

		.close-icon {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			width: 50rpx;
			height: 50rpx;
			background: #DF0E0E;
      border-radius: 0 0 0 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>